import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { Image } from 'react-vant';
import { shopDetail } from '../../../api/yjr/yjr_api'
import { useParams } from 'react-router-dom';
import '../style/shopDetails.css'
import Dai from '../yjr_image/代金券-券.png'
import Gou from '../yjr_image/购物车.png'
import Hong from '../yjr_image/红包.png'
import Huo from '../yjr_image/货车.png'

export default function Details() {

    const back = () => {
        window.history.back()
        sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
    }

    const { id } = useParams()

    const [sDetails, setSdetails] = useState<any>([])

    const getShopDetails = async () => {
        const res = await shopDetail({ id })
        if (res.data.code === 200) {
            setSdetails(res.data.details)
            let ls = res.data.details.detail_image
            console.log(ls);
        }
    }

    const [count, setCount] = useState([
        {
            id: 1,
            icon: Dai,
            name1: '点击即兑换',
            name2: '进入确认订单页'
        },
        {
            id: 2,
            icon: Gou,
            name1: '填写地址',
            name2: '并下单'
        },
        {
            id: 3,
            icon: Hong,
            name1: '支付成功',
            name2: '等待发货'
        },
        {
            id: 4,
            icon: Huo,
            name1: '在兑换记录',
            name2: '查看物流'
        },
    ])

    useEffect(() => {
        getShopDetails()
    }, [])

    return (
        <div className='d-box'>
            <div className='details-header'>
                <NavBar onBack={back}>
                    <div className='header-title'>商品详情</div>
                </NavBar>
            </div>

            <div className='details-content'>
                <div className='details-div'>
                    <Image lazyload src={sDetails.image} />
                </div>
                <div className='box-details'>
                    <h2 className='hp'><span style={{ color: 'red' }}>{sDetails.integral}积分</span> <span style={{ fontSize: '1.2rem', color: '#999' }}>价值{sDetails.integral / 2}</span></h2>
                    <h4 className='hp'>{sDetails.title}</h4>
                    <p className='hp' style={{ fontSize: '1.2rem', color: '#999' }}>已兑{sDetails.integral + 189056}件</p>
                </div>
            </div>
            <div style={{ width: "100%", height: "6rem" }}></div>

            <div className='details-function'>
                <p style={{ marginLeft: '2rem' }}>兑换方法</p>
                <div className='details-function-content'>
                    {
                        count.map((item: any) => {
                            return (
                                <div className='details-function-content-div' key={item.id}>
                                    <div className='detailes-img'>
                                        <img src={item.icon} style={{ width: '100%', height: '100%' }} />
                                    </div>
                                    <p style={{ fontSize: '1rem', color: '#999', textAlign: 'center' }}>
                                        {item.name1}<br />
                                        {item.name2}
                                    </p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='condition'>
                <p style={{ marginLeft: '2rem', marginBottom: '1rem' }}>兑换条件</p>
                <div className='condition-content'>
                    <table>
                        <tbody>
                            <tr className='condition-tr'>
                                <td className='condition-title'>身份需求</td>
                                <td>仅支持境内手机号码的用户兑换，不支持港/澳/台/海外手机号码:未注册用户无法兑换。</td>
                            </tr>
                            <tr></tr>
                            <tr></tr>
                            <tr></tr>
                            <tr className='condition-tr'>
                                <td className='condition-title'>兑换须知</td>
                                <td>兑换后预计48小时内发货，节假日等特殊情况，以页面通知发货时效为准</td>
                            </tr>
                            <tr></tr>
                            <tr></tr>
                            <tr></tr>
                            <tr className='condition-tr'>
                                <td className='condition-title'>城市/发货</td>
                                <td>以下地区暂不支持包邮:海南、甘肃、内蒙、宁夏、青海、西藏、新疆、澳门、台湾、海外地区，具体邮费以下单页面展示为准</td>
                            </tr>
                            <tr></tr>
                            <tr></tr>
                            <tr></tr>
                            <tr className='condition-tr'>
                                <td className='condition-title'>注意事项</td>
                                <td>兑换后不支持修改收货地址。</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div className='details-footer'>
                <p style={{ marginLeft: '2rem', marginTop: '1rem' }}>商店详情</p>
                <div style={{ width: '90%', height: '90%', margin: 'auto' }}>
                    {
                        sDetails?.detail_image?.map((item: any, index: number) => {
                            return <img key={index} src={item} style={{ width: '100%', height: '100%', marginTop: '1rem', borderRadius: '1rem' }} />
                        })
                    }

                </div>

            </div>
        </div>
    )
}
